<template>
    <div class="common-layout">
        <el-container class="container">
            <el-aside width="200px">
            <!-- 菜单开始 -->
            <div>
                <img src="logo1.png" class="image">
            </div>
                <el-menu
                unique-opened="true" 
                default-active="odometer"
                router="true">
                    <!-- 次级菜单 -->
                    <el-menu-item index="odometer">
                        <el-icon><Odometer /></el-icon>仪表盘
                    </el-menu-item>
                
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><Menu /></el-icon>常用设置
                        </template>
                        <!-- 次级菜单项 -->
                        <el-menu-item-group>
                            <el-menu-item index="teachermanagement">教师管理</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="studentmanagement">学生管理</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="announcementmanagement">公告管理</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="systemConfiguration">系统配置</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="judgementserver">判题服务器</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <!-- 菜单项 -->
                    <el-sub-menu index="3">
                        <template #title>
                        <el-icon><Aim /></el-icon>问题
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="listofQuestions">问题列表</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="addtopic">增加题目</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="importandexportquestions">导入导出题目</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="4">
                        <template #title>
                        <el-icon><Trophy /></el-icon>比赛&练习
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="competitionlist">比赛列表</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="createacontest">创建比赛</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="5">
                        <template #title>
                        <el-icon><Collection /></el-icon>课程
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="curriculumschedule">课程列表</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="createacourse">创建课程</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <!-- 页面右侧 -->
            <el-container>
                <el-header>
                        <el-icon><Search /></el-icon>
                        <el-icon><Share /></el-icon>
                                <el-dropdown>
                                <span class="el-dropdown-link">
                                    username
                                    <el-icon class="el-icon--right">
                                        <arrow-down />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-drowdown-item>logout</el-drowdown-item>
                                    </el-dropdown-menu>
                                </template>
                                </el-dropdown>
                </el-header>

                <el-main>

                    <router-view />

                </el-main>

                <el-footer>
                    Bulid Version:20210929bd
                </el-footer>

            </el-container>
        </el-container>
    </div>
</template>

<script>
import { Odometer,Menu,Aim,Trophy,Collection,Search,Share,ArrowDown} from '@element-plus/icons-vue'

export default{
    components:{
        Odometer,
        Menu,
        Aim,
        Trophy,
        Collection,
        Search,
        Share,
        ArrowDown,
    }
}
</script>

<style>
.common-layout, .container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.el-header {
    background-color: #F9FAFC;
    text-align: right;
}
.el-footer {
    line-height: 60px;
    background-color: #EDECEC;
}
.el-aside {
    background-color: white;
    text-align: center;
    line-height: 200px;
}
.el-main {
    background-color: #EDECEC;
    text-align: left;
}
.image {
    width: 100%;
    height: 20%;
    text-align: center;
    vertical-align: middle;
}
.right {
    text-align: right;
}
</style>
